<!--
 * @描述: 
 * @作者: 约訂
 * @Date: 2024-10-31 10:27:48
 * @LastEditTime: 2024-11-26 13:13:04
 * @修改人员: 约訂
-->
<template>
  <div class="chat_item_main l_show" v-if="chatMain?.Record == 1">
    <div class="item_top">
      <!-- <el-avatar :size="26" :src="chatMain.SendUserAvatar" /> -->
      <span class="chat_name">{{ chatMain.SendUserName }}</span>
      <!-- font_12 -->
      <span class="chat_yarn">{{ chatMain.Time.split("T")[0] }}</span>
      <span class="chat_time">{{ chatMain.Time.split("T")[1] }}</span>
      <div
        class="font_12 replied"
        v-if="chatMain.NoNeedAnswer == 1 || chatMain.IsAnswer == 1"
      >
        已回复
      </div>
      <div class="font_12 no_replied" v-else @click="OpenIsReply(chatMain)">
        未回复
      </div>
      <!-- <el-icon
        v-if="chatMain.NoNeedAnswer == 1 || chatMain.IsAnswer == 1"
        class="over_icon"
        ><CircleCheckFilled
      /></el-icon>
      <el-icon v-else class="await_icon"><InfoFilled /></el-icon> -->
    </div>
    <div class="item_content text_content">
      <div v-if="chatMain.QuoteContent != null" class="cite_box">
        <div class="cite_text_l">引用：“</div>
        <div
          class="cite_text"
          v-if="ChangeData(chatMain.QuoteContent).ContentType == 0"
          v-html="setKeyWord(ChangeData(chatMain.QuoteContent))"
        ></div>
        <span v-else-if="ChangeData(chatMain.QuoteContent).ContentType == 1">
          <el-image
            style="width: 100px; height: 100px"
            :src="ChangeData(chatMain.QuoteContent).Content"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[ChangeData(chatMain.QuoteContent).Content]"
            :initial-index="0"
            preview-teleported
            fit="cover"
          />
        </span>
        <span
          class=""
          v-else-if="ChangeData(chatMain.QuoteContent).ContentType == 2"
        >
          <video
            width="250"
            height="150"
            poster=""
            preload="none"
            controls="controls"
          >
            <source
              :src="ChangeData(chatMain.QuoteContent).Content"
              type="video/webm"
            />
            <source
              :src="ChangeData(chatMain.QuoteContent).Content"
              type="video/mp4"
            />
            <!-- <source
                  src="https://workpro.s3.cn-northwest-1.amazonaws.com.cn/link_msg/f963e1bc-005c-4ebf-abd0-eb47c88ef6ef/80ba9bd7-d938-4dd3-af37-d875dee9e325.silk"
                  type="video/webm"
                /> -->
          </video>
        </span>
        <span
          class=""
          v-else-if="ChangeData(chatMain.QuoteContent).ContentType == 3"
        >
          <a :href="ChangeData(chatMain.QuoteContent).Content">
            <div class="center_box">
              <span>{{
                decodeURI(
                  ChangeData(chatMain.QuoteContent).Content.substring(
                    ChangeData(chatMain.QuoteContent).Content.lastIndexOf("/") +
                      1,
                    ChangeData(chatMain.QuoteContent).Content.length
                  )
                )
              }}</span>
              <el-icon :size="40"><Document /></el-icon>
            </div>
          </a>
        </span>
        <span
          class=""
          v-else-if="ChangeData(chatMain.QuoteContent).ContentType == 4"
        >
          <audio
            controls
            :src="ChangeData(chatMain.QuoteContent).Content"
          ></audio>
        </span>
        <div class="cite_text_r">”</div>
      </div>
      <div @click="UpText(chatMain)">
        <div
          v-if="chatMain.ContentType == 0"
          v-html="setKeyWord(chatMain)"
          class="text_content"
        ></div>
        <span v-else-if="chatMain.ContentType == 1">
          <!-- {{ chatMain.Content || "---无效信息" }} -->
          <el-image
            preview-teleported
            style="width: 100px; height: 100px"
            :src="chatMain.Content"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[chatMain.Content]"
            :initial-index="0"
            fit="cover"
          />
        </span>
        <span v-else-if="chatMain.ContentType == 2" class="text_content">
          <video
            width="250"
            height="150"
            poster=""
            preload="none"
            controls="controls"
          >
            <source :src="chatMain.Content" type="video/webm" />
            <source :src="chatMain.Content" type="video/mp4" />
            <!-- <source
                  src="https://workpro.s3.cn-northwest-1.amazonaws.com.cn/link_msg/f963e1bc-005c-4ebf-abd0-eb47c88ef6ef/80ba9bd7-d938-4dd3-af37-d875dee9e325.silk"
                  type="video/webm"
                /> -->
          </video>
        </span>
        <span v-else-if="chatMain.ContentType == 3" class="text_content">
          <a :href="chatMain.Content">
            <div class="center_box">
              <span>{{
                decodeURI(
                  chatMain.Content.substring(
                    chatMain.Content.lastIndexOf("/") + 1,
                    chatMain.Content.length
                  )
                )
              }}</span>
              <el-icon :size="40"><Document /></el-icon>
            </div>
          </a>
        </span>
        <span v-else-if="chatMain.ContentType == 4" class="text_content">
          <audio controls :src="chatMain.Content"></audio>
        </span>
      </div>
      <div class="wu_box">
        <span @click="ChangeTextType(chatMain)">无需回复</span>
        <span @click="UpText(chatMain)" class="back_text">回复消息</span>
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="问题回复表" width="800">
      <el-table :data="replyList">
        <el-table-column property="Time" label=" 回复时间" width="200" />
        <el-table-column property="TrueName" label=" 回复人" width="80" />
        <el-table-column property="Content" label="回复内容" />
      </el-table>
    </el-dialog>
  </div>

  <div class="chat_item_main r_show" v-if="chatMain?.Record == 0">
    <div class="r_item_top">
      <!-- <el-avatar :size="26" :src="infoData?.avatar" /> -->
      <span class="chat_name">{{ chatMain.SendUserName }}</span>
      <span class="chat_yarn font_12">{{ chatMain.Time.split("T")[0] }}</span>
      <span class="chat_time font_12">{{ chatMain.Time.split("T")[1] }}</span>
    </div>
    <div class="item_content">
      <div class="text_content">
        <span v-if="chatMain.QuestionContent != null" class="">
          <!-- <div class="cite_text_l">问题：“</div>cite_box -->
          <span
            class="cite_text"
            v-if="chatMain.QuestionContentType == 0"
            v-html="setKeyWordReturn(chatMain)"
          ></span>
          <span v-else-if="chatMain.QuestionContentType == 1" class="">
            <el-image
              preview-teleported
              style="width: 100px; height: 100px"
              :src="chatMain.QuestionContent"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[chatMain.QuestionContent]"
              :initial-index="0"
              fit="cover"
            />
          </span>
          <span class="" v-else-if="chatMain.QuestionContentType == 2">
            <video
              width="250"
              height="150"
              poster=""
              preload="none"
              controls="controls"
            >
              <source :src="chatMain.QuestionContent" type="video/webm" />
              <source :src="chatMain.QuestionContent" type="video/mp4" />
              <!-- <source
                  src="https://workpro.s3.cn-northwest-1.amazonaws.com.cn/link_msg/f963e1bc-005c-4ebf-abd0-eb47c88ef6ef/80ba9bd7-d938-4dd3-af37-d875dee9e325.silk"
                  type="video/webm"
                /> -->
            </video>
          </span>
          <span class="" v-else-if="chatMain.QuestionContentType == 3">
            <a :href="chatMain.QuestionContent">
              <div class="center_box">
                <span>{{
                  decodeURI(
                    chatMain.QuestionContent.substring(
                      chatMain.QuestionContent.lastIndexOf("/") + 1,
                      chatMain.QuestionContent.length
                    )
                  )
                }}</span>
                <el-icon :size="40"><Document /></el-icon>
              </div>
            </a>
          </span>
          <span class="" v-else-if="chatMain.QuestionContentType == 4">
            <audio controls :src="chatMain.QuestionContent"></audio>
          </span>
          <!-- <div class="cite_text_r">”</div> -->
        </span>
        ======
        <span
          v-if="chatMain.ContentType == 0"
          v-html="setKeyWord(chatMain)"
          class=""
        ></span>
        <div v-else-if="chatMain.ContentType == 1" class="image_content">
          <!-- {{ chatMain.Content || "---无效信息" }} -->
          <el-image
            style="width: 100px; height: 100px"
            :src="chatMain.Content"
            preview-teleported
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[chatMain.Content]"
            :initial-index="0"
            fit="cover"
          />
        </div>
        <span class="" v-else-if="chatMain.ContentType == 2">
          <video
            width="250"
            height="150"
            poster=""
            preload="none"
            controls="controls"
          >
            <source :src="chatMain.Content" type="video/webm" />
            <source :src="chatMain.Content" type="video/mp4" />
            <!-- <source
                  src="https://workpro.s3.cn-northwest-1.amazonaws.com.cn/link_msg/f963e1bc-005c-4ebf-abd0-eb47c88ef6ef/80ba9bd7-d938-4dd3-af37-d875dee9e325.silk"
                  type="video/webm"
                /> -->
          </video>
        </span>
        <span class="" v-else-if="chatMain.ContentType == 3">
          <a :href="chatMain.Content">
            <div class="center_box">
              <span>{{
                decodeURI(
                  chatMain.Content.substring(
                    chatMain.Content.lastIndexOf("/") + 1,
                    chatMain.Content.length
                  )
                )
              }}</span>
              <el-icon :size="40"><Document /></el-icon>
            </div>
          </a>
        </span>
        <span class="" v-else-if="chatMain.ContentType == 4">
          <audio controls :src="chatMain.Content"></audio>
        </span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toggleDark } from "~/composables";
import { ref, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
/**element - push 图标 */
const { proxy } = getCurrentInstance() as any;
/** */
const emit = defineEmits(["UpText"]);
const dialogTableVisible = ref<boolean>(false);
const props = defineProps({
  /**需要渲染的所有群 */
  chatMain: {
    type: Object, // 数据类型
    default: {}, // 未传值时的默认值
  },
  infoData: {
    type: Object, // 数据类型
    default: {}, // 未传值时的默认值
  },
  userData: {
    type: Object, // 数据类型
    default: {}, // 未传值时的默认值
  },
});
/**检索指定文本 */
const setKeyWord = (json: any) => {
  const detect = (str: any) => {
    const list = [];
    if (json.OrderNumber) {
      list.push(json.OrderNumber);
    }
    list.forEach(function (val) {
      let reg = new RegExp(val, "g");
      //   onclick="clickThis('${val}')"
      str = str.replace(
        reg,
        `<span  style="color: red;" class="order_number">${val}</span>`
      );
    });

    return str;
  };
  let OrderNumber = detect(json.Content);
  return OrderNumber;
};
/**检索回复指定文本 */
const setKeyWordReturn = (json: any) => {
  const detect = (str: any) => {
    const list = [];
    if (json.OrderNumber) {
      list.push(json.OrderNumber);
    }
    list.forEach(function (val) {
      let reg = new RegExp(val, "g");
      //   onclick="clickThis('${val}')"
      str = str.replace(
        reg,
        `<span  style="color: red;" class="order_number">${val}</span>`
      );
    });
    // console.log("获取的文本", json.QuestionContent);

    return str;
  };
  let OrderNumber = detect(json.QuestionContent);
  return OrderNumber;
};
const ChangeData = (json: any) => {
  // console.log(JSON.parse(json));
  return JSON.parse(json);
};
/**更新回复内容结构 */
const UpText = (row: any) => {
  // console.log(row);
  if (row.SendRealName != "wechatybot") {
    emit("UpText", row);
  }
};

/**无需回复 */
const ChangeTextType = (row: any) => {
  console.log(row);
  ElMessageBox.confirm("请确认是更变为无需回复?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "在考虑一下",
    type: "warning",
  })
    .then(async () => {
      let { rows, Success } = await proxy.$Post(
        "/DealWeChatRecord/AnswerWeChatRecord",
        {
          ...row,
          NoNeedAnswer: 1,
          UserId: props.userData.UserId,
        }
      );
      if (!Success) return;
      row.NoNeedAnswer = 1;
      ElMessage({
        type: "success",
        message: "更改成功",
      });
    })
    .catch(() => {});
};
const replyList = ref<any[]>([]);
const OpenIsReply = async (row: any) => {
  console.log(row);

  let { rows, Success } = await proxy.$Post("/DealWeChatRecord/GetAnswerList", {
    QuestionId: row.Id,
  });
  if (!Success) return;
  // console.log(rows);
  replyList.value = rows;
  dialogTableVisible.value = true;
};
</script>
<style lang="scss" src="./chat.scss">
</style>
<!-- // <style lang="scss" src="../index.scss">
// </style> -->